@import '../less/fz.less';

//定义颜色切换
.el-menu {
  background-color: transparent;
  border-bottom: none !important;
}

//100%屏幕布局
.el-container.is-vertical {
  position: relative;

  .nav-item {
    position: fixed;
    top: 60px;
  }

  .el-header {
    width: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
  }

  .el-main {
    position: fixed;
    left: 220px;
    top: 60px;
    right: 0px;
    bottom: 0px;

    .transition(.5s);

    &.active {
      left: 64px;
    }
  }
}


//宽高设置
.el-container {
  .header {
    .el-menu--horizontal>.el-submenu .el-submenu__title {
      height: 60px;
      line-height: 60px;
      border-bottom: 2px solid transparent;
    }
  }

  .logo {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    background-image: url('../images/logo-s.jpg');

    &.active {
      background-image: url('../images/logos.png');
      background-size: cover;
    }
  }

  .nav-item {
    height: 100%;
    text-align: left;
    position: relative;
    width: 220px;

    .transition(width .5s);

    &[collapse] {
      width: 64px;
    }

    .nav {
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 100%;
      position: absolute;
      top: 0px;
      .transition(.6s);
      left: 0px;
      right: 0px;
      bottom: 0px;

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 2px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 1px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #fff;
      }
    }
  }
}

.el-main {
  background-color: #f2f2f2;
}

.t30 {
  margin-top: 30px;
}

/*
//收缩后溢出状态
.el-menu--vertical {
  max-height: 60%;
  padding: 15px 0;
  overflow-y: auto;

  &::-webkit-scrollbar {
    //滚动条整体样式
    width: 2px;
    //高宽分别对应横竖滚动条的尺寸
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    //滚动条里面小方块
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #fff;
  }
}
*/
/*
 dom 树 四级 
 |-- ul > el-menu
   |-- li > el-submenu + is-opened
     |-- el-submenu__title
     |-- ul > el-menu.el-menu--inline
       |-- li > el-submenu + is-opened
         |-- el-submenu__title
         |-- ul >el-menu.el-menu--inline
           |-- li > el-menu-item + is-active
       |-- li > el-menu-item + is-active
   |-- li > el-menu-item + is-active

.el-container[data-theme=] {
  .el-menu {
    &>.el-submenu {
      .el-submenu__title {}

      &.el-menu {
        .el-submenu {
          .el-submenu__title {}

          .el-menu {
            .el-menu-item {}
          }
        }

        .el-menu-item {}

      }
    }

    &>.el-menu-item {}
  }

}


*/





.el-container[data-theme=heise] {
  @h-color: rgba(255, 255, 255, .8);
  @h-bj: #393d49;
  @n-color: #efefef;
  @n-bj: #393d49;
  @se: #921b20;

  .nav-item {
    background-color: @n-bj;
    color: @n-color ;

    .el-menu {
      .el-submenu {
        .el-submenu__title {
          color: @n-color;

          i {
            color: @n-color;
          }

          &:hover {
            background-color: darken(@n-bj, 15%);
          }
        }

        .el-menu {
          background-color: darken(@n-bj, 3%);

          .el-submenu {
            .el-submenu__title {}

            .el-menu {
              .el-menu-item {}
            }
          }

          .el-menu-item {}

        }

        //展开状态
        &.is-opened {

          //控制title
          .el-submenu__title {
            background-color: darken(@n-bj, 20%);
            color: lighten(@n-color, 10%);
          }

          .el-submenu {

            //修改css继承
            .el-submenu__title {
              background-color: transparent;
              color: lighten(@n-color, 0%);

              &:hover {
                background-color: darken(@n-bj, 17%);
              }
            }

            &.is-opened {
              .el-submenu__title {
                background-color: darken(@n-bj, 13%);
                color: lighten(@n-color, 10%);
              }

              .el-submenu {

                //修改css继承
                .el-submenu__title {
                  background-color: transparent;
                  color: lighten(@n-color, 0%);
                }

                &.is-opened {
                  .el-submenu__title {
                    background-color: darken(@n-bj, 9%);
                    color: lighten(@n-color, 10%);
                  }
                }
              }

            }

            .el-menu-item {
              background-color: darken(@n-bj, 7%);

              &:hover {
                background-color: darken(@n-bj, 14%);
              }
            }

            .el-submenu {
              .el-menu-item {
                background-color: darken(@n-bj, 4%);

                &:hover {
                  background-color: darken(@n-bj, 8%);
                }
              }
            }
          }
        }
      }

      .el-menu-item {
        color: @n-color;
        .transition(.5s);


        &.is-active {
          color: lighten(@n-color, 5%);
          border-left: 4px solid @se;
          background-color: darken(@n-bj, 8%);
        }

        &:hover {
          background-color: darken(@n-bj, 30%);
        }
      }
    }

  }
}


//默认黑色
.el-container[data-theme=heises] {
  //head和nav
  @h-color: rgba(255, 255, 255, .8);
  @h-bj: #393d49;
  @n-color: rgba(255, 255, 255, .8);
  @n-bj: #393d49;
  @se: #921b20;

  .nav-item {
    background-color: @n-bj;
    color: @n-color ;
  }

  .el-menu {}

  //title部分设置
  .el-submenu {
    &>.el-submenu__title {
      color: @n-color;

      i {
        color: @n-color;
      }

      &:hover {
        background-color: darken(@n-bj, 15%);
      }
    }

    &.is-opened {
      background-color: darken(@n-bj, 10%);

      .el-menu--inline .is-opened {
        .el-submenu__title {
          background-color: darken(@n-bj, 15%);
        }
      }

      &>.el-submenu__title {
        background-color: @se;
      }
    }

  }



  .el-menu-item {
    color: @n-color;
    .transition(.5s);

    &.is-active {
      color: lighten(@n-color, 5%);
      border-left: 4px solid @se;
      background-color: transparent;
    }

    &:hover {
      background-color: darken(@n-bj, 5%);
    }
  }



}